Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Adds fallback values to the xmodule xblocks global css variables #36183

Merged
merged 5 commits into from
Feb 11, 2025
Merged

chore: Adds fallback values to the xmodule xblocks global css variables #36183

merged 5 commits into from
Feb 11, 2025

Conversation

farhan
Copy link
Contributor

@farhan farhan commented Jan 28, 2025 •
edited
Loading

Adds fallback to variables.
In case required global css variables are not provided by the runtime, XBlocks should render normally on its default values.

Predecessor PR/stories:

#35300
#35233

Fallbacks of following global css variables has not been added (or not been added yet):

CSS

--font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif

--icon-correct: url("../images/correct-icon.png")
--icon-incorrect: url("../images/incorrect-icon.png")
--icon-info: url("../images/info-icon.png")
--icon-partially-correct: url("../images/partially-correct-icon.png")
--icon-spinner: url("../images/spinner.gif")
--icon-unanswered: url("../images/unanswered-icon.png")

SCSS

    --font-family-sans-serif: $font-family-sans-serif;

    --icon-correct: url($static-path + '/images/correct-icon.png');
    --icon-incorrect: url($static-path + '/images/incorrect-icon.png');
    --icon-info: url($static-path + '/images/info-icon.png');
    --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
    --icon-spinner: url($static-path + '/images/spinner.gif');
    --icon-unanswered: url($static-path + '/images/unanswered-icon.png');

Where I have taken the fallback values from?

I have copied the fallback values from cms/static/css/studio-main-v1.css file which generates when we compile the sass files like via npm run compile-sass command.

:root {
  --action-primary-active-bg: #0075b4;
  --base-font-size: 18px;
  --base-line-height: 1.5em;
  --baseline: 20px;
  --black: #000;
  --black-t2: rgba(0, 0, 0, 0.5);
  --blue: #0075b4;
  --blue-d1: #005e90;
  --blue-d2: #00466c;
  --blue-d4: #001724;
  --blue-s1: #0075b4;
  --body-color: #313131;
  --border-color: #e7e7e7;
  --bp-screen-lg: 1024px;
  --btn-brand-focus-background: #065683;
  --correct: #008100;
  --danger: #b20610;
  --darkGrey: #8891a1;
  --error-color: #cb0712;
  --error-color-dark: #95050d;
  --error-color-light: #f95861;
  --font-bold: 700;
  --font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --general-color-accent: #0075b4;
  --gray: #767676;
  --gray-300: #d9d9d9;
  --gray-d1: #5e5e5e;
  --gray-l2: #adadad;
  --gray-l3: #c8c8c8;
  --gray-l4: #e4e4e4;
  --gray-l6: #f8f8f8;
  --icon-correct: url("../images/correct-icon.png");
  --icon-incorrect: url("../images/incorrect-icon.png");
  --icon-info: url("../images/info-icon.png");
  --icon-partially-correct: url("../images/partially-correct-icon.png");
  --icon-spinner: url("../images/spinner.gif");
  --icon-unanswered: url("../images/unanswered-icon.png");
  --incorrect: #b20610;
  --lightGrey: #edf1f5;
  --lighter-base-font-color: #646464;
  --link-color: #1b6d99;
  --medium-font-size: 0.9em;
  --partially-correct: #008100;
  --primary: #0075b4;
  --shadow: rgba(0, 0, 0, 0.2);
  --shadow-l1: rgba(0, 0, 0, 0.1);
  --sidebar-color: #f6f6f6;
  --small-font-size: 80%;
  --submitted: #0075b4;
  --success: #008100;
  --tmg-f2: 0.25s;
  --tmg-s2: 2s;
  --transparent: transparent;
  --uxpl-gray-background: #d9d9d9;
  --uxpl-gray-base: #414141;
  --uxpl-gray-dark: #111111;
  --very-light-text: white;
  --warning: #e2c01f;
  --warning-color: #ffc01f;
  --warning-color-accent: #fffcdd;
  --white: #fff;
  --yellow: #e2c01f; 
}

@farhan farhan marked this pull request as ready for review January 28, 2025 13:09
@kdmccormick kdmccormick self-requested a review February 6, 2025 13:25
kdmccormick
kdmccormick approved these changes Feb 6, 2025
View reviewed changes
Copy link
Member

@kdmccormick kdmccormick left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good at a high level, good thinking. Please have an Aximprovements team member review as well, and ensure that you have manually tested. As discussed at sync-up, we'll need a follow-up to remove the redundant defaults within :root { ... }

@ttqureshi
Copy link
Contributor

TESTING NOTES

We've:

  • double checked the fallback values from cms/static/css/studio-main-v1.css.
  • tested by removing the global variables to verify if the fallback values are being applied correctly.

@farhan
Copy link
Contributor Author

farhan commented Feb 11, 2025

I have done the manual testing a well.

@farhan farhan merged commit 95403c5 into master Feb 11, 2025
49 checks passed
@farhan farhan deleted the farhan/add-fallbacks-to-css-var branch February 11, 2025 14:41
@edx-pipeline-bot
Copy link
Contributor

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

@edx-pipeline-bot
Copy link
Contributor

2U Release Notice: This PR has been deployed to the edX production environment.

1 similar comment
@edx-pipeline-bot
Copy link
Contributor

2U Release Notice: This PR has been deployed to the edX production environment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kdmccormick kdmccormick kdmccormick approved these changes

@ttqureshi ttqureshi ttqureshi approved these changes

Assignees
No one assigned
Labels
None yet
Projects
Aximprovements Team
Status: ✅ Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@farhan @ttqureshi @edx-pipeline-bot @kdmccormick